<style>
    .ly-near-picker {
        position: relative;
        display: inline-block;
    }

    .ly-near-picker-input {
        border-radius: 4px;
        border: 1px solid #C0CCDA;
        height: 32px;
        line-height: 32px;
        padding-right: 5px;
        padding-left: 10px;
        text-align: left;
        min-width: 120px;
        display: inline-block;
        font-size: 13px;
        background: #fff;
    }


    .ly-near-picker-date-dropdown-menu {
    }
</style>
<template>
    <div class="ly-near-picker">
        <el-date-picker
                style="position: absolute;right: 0;min-width: 80px;width: 80px;opacity: 0;"
                class="ly-near-picker-date"
                ref="date-picker"
                v-model="date"
                type="daterange"
                align="left"
                unlink-panels
                range-separator="至"
                @change="datePickerChange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                size="small"
        >
        </el-date-picker>
        <el-dropdown :hide-on-click="false" @command="handleCommand" @visible-change="dropdownChange">
          <span class="ly-near-picker-input">
                  <i class="el-icon-date"></i>

            <span>
           <span>{{text}}</span>
                <i style="float: right;line-height: 32px;" class="el-icon-arrow-down el-icon--right"></i>
          </span>
          </span>

            <el-dropdown-menu ref="dropdown-menu" class="ly-near-picker-date-dropdown-menu" slot="dropdown" >
                <el-dropdown-item v-if="hides.indexOf('1h')==-1" command="1h">最近1小时 ({{near_start}}时 - {{near_end}}时)</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('24h')==-1" command="24h">最近24小时</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('today')==-1" command="today">今日</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('yesterday')==-1" command="yesterday">昨日</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('this_week')==-1" command="this_week">本周</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('last_week')==-1" command="last_week">上周</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('7d')==-1" command="7d">最近7天</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('14d')==-1" command="14d">最近14天</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('30d')==-1" command="30d">最近30天</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('this_month')==-1" command="this_month">本月</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('last_month')==-1" command="last_month">上月</el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('near')==-1" command="near">最近
                    <el-input v-model.number="day" type="number" size="mini"
                              style="width: 50px;    margin: 0 3px;"></el-input>
                    天
                    <el-button @click="setNearDay" size="mini" type="primary">确定</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="hides.indexOf('customer')==-1" command="customer" divided>自定义</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>


    </div>
</template>
<script>

    Rap.define({
        name: 'ly-near-picker',
        props: {
            value: {
                'default': function () {
                    return {}
                }
            }
            , begin_time: {
                'default': function () {
                    return 'begin_time'
                }
            }, date_format: {
                'default': function () {
                    return 'date_format'
                }
            },
            //时间取整
            notFix:Boolean,
            end_time: {
                'default': function () {
                    return 'end_time'
                }
            },
            'default': {
                'default': function () {
                    return 'this_week'
                }
            },
            hideOptions: {
                'default': function () {
                    return ''
                }
            }
        },
        created: function () {
            this.hides = this.hideOptions.split(',');
            this.handleCommand(this.default);

        },
        data: function () {
            return {
                pickerOptions:{
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
                hides: [],
                date: [],
                text: "最近7天",
                day: 7,
                near_start:'',
                near_end:'',

            }
        }, methods: {
            dropdownChange:function (){
                this.near_start = dayjs().add(-1, 'h').startOf('hour').format("HH");
                this.near_end = dayjs().startOf('hour').format("HH");
            },
            handleCommand: function (c) {
                if (c === 'near') {
                    return;
                }
                if (c === '24h') {
                    this.text = '最近24小时';
                    Vue.set(this.value, 'date_type', '24h');
                    Vue.set(this.value, this.begin_time, dayjs().add(-24, 'h').startOf('hour').unix());
                    if(this.notFix){
                        Vue.set(this.value, this.end_time, dayjs().unix());
                    }else{
                        Vue.set(this.value, this.end_time, dayjs().startOf('hour').unix());
                    }
                }else if (c === '1h') {
                    this.text = '最近1小时';
                    Vue.set(this.value, 'date_type', '1h');
                    Vue.set(this.value, this.begin_time, dayjs().add(-1, 'h').startOf('hour').unix());
                    if(this.notFix){
                        Vue.set(this.value, this.end_time, dayjs().unix());
                    }else{
                        Vue.set(this.value, this.end_time, dayjs().startOf('hour').unix());
                    }
                }
                else if (c === 'yesterday') {
                    this.text = '昨日';
                    Vue.set(this.value, 'date_type', 'yesterday');
                    Vue.set(this.value, this.begin_time, dayjs().add(-24, 'h').startOf('day').unix());
                    Vue.set(this.value, this.end_time, dayjs().add(-24, 'h').endOf('day').unix());
                } else if (c === 'today') {
                    this.text = '今日';
                    Vue.set(this.value, 'date_type', 'today');
                    Vue.set(this.value, this.begin_time, dayjs().startOf('day').unix());
                    if(this.notFix){
                        Vue.set(this.value, this.end_time, dayjs().unix());
                    }else{
                        Vue.set(this.value, this.end_time, dayjs().startOf('hour').unix());
                    }
                } else if(c==='this_month'){
                    this.text = '本月';
                    Vue.set(this.value, 'date_type', 'this_month');
                    Vue.set(this.value, this.begin_time, dayjs().startOf('month').unix());
                    if(this.notFix){
                        Vue.set(this.value, this.end_time, dayjs().unix());
                    }else{
                        Vue.set(this.value, this.end_time, dayjs().startOf('day').unix());
                    }
                } else if(c==='this_week'){
                    this.text = '本周';
                    Vue.set(this.value, 'date_type', 'this_week');
                    Vue.set(this.value, this.begin_time, dayjs().startOf('week').unix());
                    if(this.notFix){
                        Vue.set(this.value, this.end_time, dayjs().unix());
                    }else{
                        Vue.set(this.value, this.end_time, dayjs().startOf('hour').unix());
                    }
                }else if(c==='last_week'){
                    this.text = '上周';
                    Vue.set(this.value, 'date_type', 'last_week');
                    Vue.set(this.value, this.begin_time, dayjs().add(-1,"w").startOf('week').unix());
                    Vue.set(this.value, this.end_time, dayjs().add(-1,"w").endOf('week').unix());
                }
                else if(c==='last_month'){
                    this.text = '上月';
                    Vue.set(this.value, 'date_type', 'last_month');
                    Vue.set(this.value, this.begin_time, dayjs().add(-1,"M").startOf('month').unix());
                    Vue.set(this.value, this.end_time, dayjs().add(-1,"M").endOf('month').unix());
                }
                else if (c === 'customer') {
                    this.$refs['date-picker'].focus();
                    this.date = '';
                } else {
                    c = parseInt(c.replace('d', ''));
                    this.text = '最近' + c + '天';
                    Vue.set(this.value, 'date_type', 'near');
                    Vue.set(this.value, this.begin_time, dayjs().add(-c, 'd').startOf('day').unix());
                    if(this.notFix){
                        Vue.set(this.value, this.end_time, dayjs().unix());
                    }else{
                        Vue.set(this.value, this.end_time, dayjs().startOf('day').unix());
                    }
                }
                if (this.$refs['dropdown-menu']) {
                    this.$refs['dropdown-menu'].$el.style.display = 'none';
                }
                this.format();
                this.$emit('changed');

            }, datePickerChange: function () {
                if (this.date.length !== 2) return;
                this.text = dayjs(this.date[0]).format('YYYY-MM-DD') + ' 至 ' + dayjs(this.date[1]).format('YYYY-MM-DD');
                Vue.set(this.value, this.begin_time, dayjs(this.date[0]).startOf('day').unix());
                Vue.set(this.value, this.end_time, dayjs(this.date[1]).endOf('day').unix());
                this.format();
                this.$emit('changed');
                Vue.set(this.value, 'date_type', 'customer');
            }, setNearDay: function () {
                this.text = '最近' + this.day + '天';
                Vue.set(this.value, this.begin_time, dayjs().add(-this.day, 'd').startOf('day').unix());
                Vue.set(this.value, this.end_time, dayjs().unix());
                if (this.$refs['dropdown-menu']) {
                    this.$refs['dropdown-menu'].$el.style.display = 'none';
                }
                Vue.set(this.value, 'date_type', 'near');
                this.format();
                this.$emit('changed');
            }, format() {
                var begin_time = this.value[this.begin_time];
                var end_time = this.value[this.end_time];
                if(this.value.date_type==='this_week'||this.value.date_type==='last_week'){
                    Vue.set(this.value, this.date_format, "D");
                }else if(end_time-begin_time<=60*60){
                    //间隔1 小时建议显示为分钟
                    Vue.set(this.value, this.date_format, "m");
                }else if(end_time-begin_time<=60*60*24){
                    //间隔24 小时建议显示为分钟
                    Vue.set(this.value, this.date_format, "H");
                }else if(end_time-begin_time<=60*60*24*60){
                    //60天以内显示为天
                    Vue.set(this.value, this.date_format, "D");
                }else {
                    //60以上显示为月
                    Vue.set(this.value, this.date_format, "M");
                }

            }

        }
    });

</script>
